<template>
  <div class="search-hot-module">
    <el-link v-for="(word, i) in words" :key="word" :underline="false" @click="search(word)">
      <div :class="['hot-word', `no-${i + 1}`]">{{ word }}</div>
    </el-link>
  </div>
</template>

<script lang="ts" setup>
import { defineEmits } from 'vue'
const words = [
  '肺炎',
  '高血压',
  '糖尿病',
  '鼻炎',
  '腹泻',
  '低血糖',
  '贫血',
  '胃肠炎',
  '白癜风',
  '湿疹'
]

const emit = defineEmits(['search'])
const search = (word: string) => {
  emit('search', word)
}
</script>
<style lang="scss" scoped>
.search-hot-module {
  margin-top: 2px;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;

  .hot-word {
    float: left;
    margin-right: 20px;
    line-height: 15px;
    font-size: 12px;
    color: #9d9b9b;
  }

  .hot-word:hover {
    color: orangered;
  }

  .no-1 {
    color: red;
  }

  .no-2 {
    color: goldenrod;
  }

  .no-3,
  .no-4 {
    color: yellowgreen;
  }
}

@media screen and (max-width: 480px) {
  .search-hot-module {
    margin-top: 5px;
  }
}
</style>
